



// 视频控制

// 视频状态函数
// - 用代码表达语言的魅力
// - 用代码书写山河的壮丽
let videoUrls = ''
let videoCue = 0
let telNum = ''
// 'progress'
const player = new Plyr('#player', {
    controls: ['play-large', 'play', 'current-time', 'mute', 'volume', 'fullscreen'],
    settings: ['captions', 'quality', 'speed', 'loop']
})


let tags = 0
player.on('play', event => {
    tags = 0 // 每次播放开始时重置tags
    player.currentTime = parseFloat(getCookie('savedTime'))
    recordInterval = setInterval(() => {
        if (parseInt(player.currentTime) < getCookie('savedTime')) {
            player.currentTime = parseFloat(getCookie('savedTime'))
        }
    }, 500)
})

player.on('pause', event => {
    console.log('视频暂停')
    clearInterval(recordInterval) // 清理计时器避免内存泄漏
})

player.on('ended', event => {
    if (tags === 0) {
        tags = 1
        player.pause()
        alert('恭喜您！视频已播放完毕，赶紧参与答题吧！')
    }
})



// 栏目切换
function tabCut() {
    const jj = document.querySelector('.jj')
    const cj = document.querySelector('.cj')
    const tab = document.querySelector('.tab')
    const ti = document.querySelector('.ti')
    const info = document.querySelector('.info')
    tab.addEventListener('click', (e) => {
        if (e.target.nodeName === 'LI') {
            console.log(e.target)
            ti.style.border = 'none'
            ti.style.color = '#000'
            info.style.border = 'none'
            info.style.color = '#000'
            e.target.style.borderBottom = '3px solid red'
            e.target.style.color = 'red'
        }
        if (e.target.nodeName === 'LI' && e.target.getAttribute("data-tab-id") === '0') {
            jj.style.display = 'none'
            cj.style.display = 'block'
        }
        if (e.target.nodeName === 'LI' && e.target.getAttribute("data-tab-id") === '1') {
            jj.style.display = 'block'
            cj.style.display = 'none'
        }
    })
}

// 答题判断
// 正确答案
let okContent = ''
function ifTi() {
    // 当前选择的答案
    let thisContent = 'null'
    // 获取按钮
    const sumbit = document.querySelector('.sumbit')
    const ul = document.querySelector('.ti-list')
    const li = document.querySelectorAll('.ti-list li')
    ul.addEventListener('click', function (e) {
        if (e.target.nodeName === 'LI') {
            li.forEach((arr, index) => {
                arr.classList.remove('li-ok')
            })
            e.target.classList.add('li-ok')
            thisContent = e.target.getAttribute('data-id')
        }
    })
    // 单击答题按钮

    sumbit.addEventListener('click', function (e) {
        // 检查视频播放状态
        // 检查 class 属性是否包含指定的类

        if (player.currentTime != player.duration) {
            // class 包含所有指定的类
            alert('观看完视频后才能参与')
        }
        else if (thisContent === 'null') {
            alert('请选择后再提交')
        }
        else if (thisContent == okContent) {
            alert('回答正确！为您呼叫中奖热线！')
            callNumber(telNum)
        }
        else {
            alert('回答错误')
        }

    })
}
// 拨打电话函数
function callNumber(phoneNumber) {
    window.location.href = 'tel:' + phoneNumber
}

// 设置页面信息
function setDocInfo() {
    async function getData() {
        try {
            let result = await axios({
                url: './php/cont_api.php'
            })
            // await videoStart(result.data.videoUrl)
            player.source = {
                type: 'video',
                sources: [
                    {
                        src: result.data.videoUrl,
                        type: 'video/mp4'
                    }
                ]
            }
            // let savedTime = localStorage.getItem('savedTime')
            // player.currentTime = parseFloat(savedTime)
            player.currentTime = parseFloat(getCookie('savedTime'))
            // player.play()
            player.currentTime = parseFloat(getCookie('savedTime'))

            // player.currentTime = parseFloat(savedTime)
            return result.data

        } catch (error) {
            console.error(error)
        }
    }

    getData().then(data => {
        // 判断开关状态
        if (data.onOff == '1') {
            console.log('开启中')
        }
        else if (data.onOff == '0') {
            // 清空所有用户视频位置
            deleteCookie('savedTime')
            closeAndRedirect('../admin/off.html')
        }
        // 顶部标题
        document.querySelector('.header h3').innerText = data.title
        // 视频内容标题
        document.querySelector('.video-tit b').innerText = data.videoTitles
        // 设置视频播放链接
        videoUrls = data.videoUrl
        console.log(data.videoUrl)
        // 题目内容
        document.querySelector('.t-til').innerText = data.topicContent
        // 题目选项
        document.querySelector('.ti-list').innerHTML = `
            <li data-id="0" class="A">A : &nbsp;&nbsp;${data.questionAnswer[0]}</li>
            <li data-id="1" class="B">B : &nbsp;&nbsp;${data.questionAnswer[1]}</li>
            <li data-id="2" class="C">C : &nbsp;&nbsp;${data.questionAnswer[2]}</li>
            <li data-id="3" class="D">D : &nbsp;&nbsp;${data.questionAnswer[3]}</li>`
        // 设置正确答案
        okContent = data.correctAnswerOption
        ifTi()
        // 老师名称
        document.querySelector('.jj-top h4').innerText = data.teacherSName
        // 老师标签
        document.querySelector('.jj-top .tag_1').innerText = data.teacherTag[0]
        document.querySelector('.jj-top .tag_2').innerText = data.teacherTag[1]
        // 老师简介
        document.querySelector('.jj-info').innerText = data.profile
        // 老师简介2
        document.querySelector('.good-info').innerText = data.other
        // 设置热线电话
        telNum = data.tel
        document.querySelector('.displayTel').innerText = `巧通全国热线：${data.tel}`
        console.log(`巧通全国热线：${data.tel}`)
    })
}


function closeAndRedirect(url) {
    // 尝试关闭当前页面
    window.open('', '_self', '') // 在某些浏览器中需要这一步
    window.close()

    // 延时短暂以确保关闭操作有时间执行
    setTimeout(function () {
        // 跳转到目标页面
        window.location.href = url
    }, 100)
}



// 继续播放按钮
document.querySelector('.playVideo').addEventListener('click', () => {
    player.play()
    player.currentTime = parseFloat(getCookie('savedTime'))
    recordInterval = setInterval(() => {
        // 判断当前视频的时常是否小于cookie中的时常
        if (parseInt(player.currentTime) < getCookie('savedTime')) {
            player.currentTime = parseFloat(getCookie('savedTime'))
        }

    }, 500)


})

// 重新播放按钮
document.querySelector('.restPlay').addEventListener('click', () => {
    const confirmation = window.confirm('确定要清空当前播放时长，重新播放吗？')
    if (confirmation) {
        player.currentTime = 0
        setCookie('savedTime', 0, 60)
        player.play()
    } else {
        // 取消操作
    }
})



setDocInfo()
tabCut()


// 清空cookie函数
function deleteCookie(name) {
    document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;'
}


// 设置Cookie的函数
function setCookie(name, value, days) {
    let expires = ""
    if (days) {
        let date = new Date()
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000))
        expires = "; expires=" + date.toUTCString()
    }
    document.cookie = name + "=" + (value || "") + expires + "; path=/"
}

// 获取Cookie的函数
function getCookie(name) {
    let nameEQ = name + "="
    let ca = document.cookie.split(';')
    for (let i = 0; i < ca.length; i++) {
        let c = ca[i]
        while (c.charAt(0) == ' ') c = c.substring(1, c.length)
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length)
    }
    return null
}

// 在页面加载时检查Cookie中是否有保存的时间
document.addEventListener('DOMContentLoaded', () => {
    const savedTime = getCookie('savedTime')

    // 如果有保存的时间，则跳转到该时间点进行播放
    if (savedTime !== null) {
        // 在设置新的源之前，先暂停播放器
        player.pause()
        // 将保存的时间转换为数字类型再设置
        player.currentTime = parseFloat(savedTime)
        // 检测是否从Cookie保存的位置开始播放
        player.once('playing', () => {
            const currentSavedTime = getCookie('savedTime')
            if (currentSavedTime !== null && currentSavedTime !== savedTime) {
                player.currentTime = parseFloat(currentSavedTime)
            }
        })
    }
})

// 监听 Plyr 的 ready 事件，确保播放器已准备好后再开始播放
player.on('ready', event => {
    player.currentTime = parseInt(getCookie('savedTime'))
    // player.play()
})

// 监听 Plyr 的播放事件
player.on('play', event => {
    // 定义一个变量来存储记录播放位置的定时器
    let recordInterval

    // 播放时，实时记录播放位置
    recordInterval = setInterval(() => {
        // 获取当前播放时间
        let currentTime = Math.floor(player.currentTime) // 去除小数点

        // 将当前播放时间保存到Cookie（排除0秒到5秒之间的时间）
        if (currentTime > 5) {
            setCookie('savedTime', currentTime, 60) // 有效期60天
        }

    }, 1000) // 每秒记录一次播放位置

    // 监听 Plyr 的暂停事件
    player.on('pause', event => {
        // 暂停时清除记录播放位置的定时器
        clearInterval(recordInterval)
    })
})



// 调试专用
/* recordInterval = setInterval(() => {
    document.querySelector('.ti').innerText = getCookie('savedTime')

}, 800) */







/* 
// 在页面加载时检查本地存储中是否有保存的时间
document.addEventListener('DOMContentLoaded', () => {
    const savedTime = localStorage.getItem('savedTime')

    // 如果有保存的时间，则跳转到该时间点进行播放
    if (savedTime !== null) {
        // 在设置新的源之前，先暂停播放器
        player.pause()
        // 将保存的时间转换为数字类型再设置
        player.once('ready', () => {
            player.currentTime = parseFloat(savedTime)
            // 检测是否从本地存储的位置开始播放
            player.once('playing', () => {
                const currentSavedTime = localStorage.getItem('savedTime')
                if (currentSavedTime !== null && currentSavedTime !== savedTime) {
                    player.currentTime = parseFloat(currentSavedTime)
                }
            })
        })
    }
})

// 监听 Plyr 的 ready 事件，确保播放器已准备好后再开始播放
player.on('ready', event => {
    let savedTime = localStorage.getItem('savedTime')
    player.currentTime = parseFloat(savedTime)
    player.play()
})

// 监听 Plyr 的播放事件
player.on('play', event => {
    // 定义一个变量来存储记录播放位置的定时器
    let recordInterval

    // 播放时，实时记录播放位置
    recordInterval = setInterval(() => {
        // 获取当前播放时间
        let currentTime = Math.floor(player.currentTime) // 去除小数点

        // 将当前播放时间保存到本地存储（排除0秒到5秒之间的时间）
        if (currentTime > 5) {
            localStorage.setItem('savedTime', currentTime)
        }
    }, 1000) // 每秒记录一次播放位置

    // 监听 Plyr 的暂停事件
    player.on('pause', event => {
        // 暂停时清除记录播放位置的定时器
        clearInterval(recordInterval)
    })
}) */
